<template>
  <div>
    <div>
      <UserInfoComp>
        <div>软件管理</div>
      </UserInfoComp>
    </div>

    <!-- 选择软件分类的对话框 -->
    <div>
      <el-dialog v-model="tvisible" title="选择软件类型">
        <SoftwareTypeComp @type-selected="selectedType" mode="selector"> </SoftwareTypeComp>
      </el-dialog>
    </div>

    <!-- 页面部分 -->
    <div>
      <!-- search部分 -->
      <div class="query-form">
        <el-form :inline="true">
          <el-form-item>
            <el-input placeholder="软件名称模糊查询" v-model="queryInfo.sname"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="软件厂商模糊查询" v-model="queryInfo.vendor"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button-group style="margin-right: 1rem">
              <el-button type="primary" @click="requery">查询</el-button>
              <el-button type="danger" @click="reset">重置</el-button>
            </el-button-group>
            <el-button type="success" @click="showadd">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据呈现的部分 -->
      <div>
        <el-table :data="list">
          <el-table-column label="软件名称" prop="sname" width="200"></el-table-column>
          <el-table-column label="软件简介" prop="intro"></el-table-column>
          <el-table-column label="软件厂商" prop="vendor" width="200"></el-table-column>
          <el-table-column label="所属分类" prop="type.tname" width="200"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button @click="showmodify(scope.row)" type="warning" size="small">修改</el-button>
              <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page">
        <el-pagination
          v-model:current-page="page.pageNumber"
          v-model:page-size="page.pageSize"
          :total="page.total"
          :page-sizes="[2, 5, 10, 15]"
          @size-change="query"
          layout="prev,pager,next,total,sizes"
          @current-change="query"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加的对话框 -->
    <div>
      <el-dialog
        title="添加软件信息"
        v-model="avisible"
        :close-on-click-modal="false"
        @closed="requery"
      >
        <div>
          <el-form>
            <el-form-item>
              <el-button v-model="addInfo.stid" @click="tvisible = true">
                {{ addButtonText }}
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-input v-model="addInfo.sname" placeholder="软件名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="addInfo.intro"
                placeholder="软件简介"
                type="textarea"
                rows="6"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="addInfo.vendor" placeholder="软件厂商"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="primary" @click="add">确定</el-button>
          <el-button type="danger" @click="resetAdd">重置</el-button>
        </template>
      </el-dialog>
    </div>

    <!-- 修改的对话框 -->
    <div>
      <el-dialog title="修改软件信息" v-model="mvisible">
        <el-form>
          <el-form-item>
            <el-button @click="tvisible = true">{{ modifyButtonText }}</el-button>
          </el-form-item>

          <el-form-item>
            <el-input v-model="modifyInfo.sname" placeholder="软件名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="modifyInfo.intro"
              placeholder="软件简介"
              type="textarea"
              rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="modifyInfo.vendor" placeholder="软件厂商"></el-input>
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button @click="modify" type="warning">确定</el-button>
          <el-button @click="mvisible = false" type="danger">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '../../js/ajax'
import { tools } from '../../js/tools'
import UserInfoComp from '@/components/UserInfoComp.vue'
import SoftwareTypeComp from '@/components/SoftwareTypeComp.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

//#region 软件类型选择
const type = ref({})
const tvisible = ref(false)
// 模式控制，二态模式
const typemode = ref('add')
const selectedType = (typeinfo) => {
  type.value = typeinfo
  // 判定
  if (typemode.value == 'add') {
    addInfo.value.stid = typeinfo.stid
    addButtonText.value = typeinfo.tname
  } else if (typemode.value == 'modify') {
    modifyInfo.value.stid = typeinfo.stid
    modifyButtonText.value = typeinfo.tname
  }
  // 值回来之后关闭选择框
  tvisible.value = false
}
//#endregion

//#region 数据查询部分

const page = ref({
  pageSize: 10,
  pageNumber: 1,
})
const queryInfo = ref({
  stid: '',
  sname: '',
  vendor: '',
})
const list = ref([])
const query = () => {
  api.get(
    `/crud/software/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '软件查询失败')
    },
  )
}

onMounted(() => {
  query()
})
// 查询按钮
const requery = () => {
  page.value.pageNumber = 1
  query()
}

// 重置按钮
const reset = () => {
  queryInfo.value = {
    sname: '',
    vendor: '',
  }
  page.value.pageNumber = 1
  query()
}
//#endregion

//#region 添加
const avisible = ref(false)
const addInfo = ref({
  stid: -1,
  sname: '',
  intro: '',
  vendor: '',
})
// 弹出添加的对话框
const showadd = () => {
  // 通知选择模式
  typemode.value = 'add'
  addInfo.value = {
    stid: -1,
    sname: '',
    intro: '',
    vendor: '',
  }
  avisible.value = true
  addButtonText.value = '请选择分类...'
}
// 添加中的重置按钮功能
const resetAdd = () => {
  addInfo.value = {
    stid: -1,
    sname: '',
    intro: '',
    vendor: '',
  }
  addButtonText.value = '请选择分类...'
}

const addButtonText = ref('请选择分类...')
const add = () => {
  api.post('/crud/software', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      resetAdd()
      avisible.value = false
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}
//#endregion

//#region 修改

const mvisible = ref(false)
const modifyInfo = ref({
  stid: -1,
  sname: '',
  intro: '',
  vendor: '',
})
// 弹出添修改的对话框
const showmodify = (info) => {
  typemode.value = 'modify'
  modifyInfo.value = tools.mergeJson(info)
  modifyButtonText.value = info.type.tname
  mvisible.value = true
}

const modifyButtonText = ref({})
const modify = () => {
  api.put('/crud/software', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      mvisible.value = false
      requery()
      return
    }
    ElMessageBox.alert(data.message, '修改失败')
  })
}
//#endregion

//#region 删除

const del = (info) => {
  ElMessageBox.alert(`是否要删除: ${info.sname} 吗?`, '删除软件', {
    type: 'warning',
  })
    .then(() => {
      api.delete(`/crud/software/${info.sid}`, {}, (data) => {
        ElMessage({
          message: data.message,
          type: data.success ? 'success' : 'error',
        })
        requery()
      })
    })
    .catch(() => {})
}
//#endregion
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
</style>
